﻿<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Gramos - Admin Dashboard</title>

    <!-- begin::global styles -->
    <link rel="stylesheet" href="assets/vendors/bundle.css" type="text/css">
    <!-- end::global styles -->

    <!-- begin::custom styles -->
    <link rel="stylesheet" href="assets/css/app.css" type="text/css">
    <link rel="stylesheet" href="assets/css/custom.css" type="text/css">
    <!-- end::custom styles -->

</head>
<body>

<!--begin:上边菜单框 over-loader-menu.html-->
<div th:replace="../templates/menu/over-loader-menu :: menu"></div>
<!--end:上边菜单框 over-loader-menu.html-->

<!-- begin::side menu 侧边菜单列表 -->
<div th:replace="../templates/menu/list-menu :: menu"></div>
<!-- end::side menu 侧边菜单列表 -->


<!--    器材信息表单    -->
<main class="main-content">

    <div class="container-fluid">

        <!-- begin::page header -->
        <div class="page-header d-md-flex justify-content-between align-items-center">
            <h4>Data Tables</h4>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb m-t-0">
                    <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
                    <li class="breadcrumb-item"><a href="#">UI Elements</a></li>
                    <li class="breadcrumb-item"><a href="#">Tables</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Data Tables</li>
                </ol>
            </nav>
        </div>
        <!-- end::page header -->

        <!--    管理员表单    -->
        <div class="card">
            <div class="card-body">
                <div>
                    <!--    分页+模糊查询操作   -->
                    <form style="margin-bottom: 20px;display:inline-block;" role="form" id="form_query"
                          th:action="@{/queryEquipment}">
                        <input id="page" name="pn" type="hidden" value="1"/>
                        <div class="form-group" style="display: inline-block">
                            <input type="text" class="form-control" placeholder="器材名称" name="search"
                                   style="width: 150px;margin-left: 20px" th:value="${search}">
                        </div>
                        <div class="form-group" style="display: inline-block">
                            <input type="text" class="form-control" placeholder="器材类别" name="searchType"
                                   style="width: 150px;margin-left: 20px" th:value="${searchType}">
                        </div>
                        <div class="form-group" style="display: inline-block">
                            <input type="text" class="form-control" placeholder="器材状态" name="searchStatus"
                                   style="width: 150px;margin-left: 20px" th:value="${searchStatus}">
                        </div>
                        <button type="submit" style="display:inline-block;" class="btn btn-theme">搜索</button>
                    </form>
                    <button class="btn btn-theme" style="display:inline-block;margin-inline-start: 15%;"
                            onclick="location.href='queryEquipment';">刷新
                    </button>
                </div>
                <table class="table-striped table-bordered" style="width: 100%;">
                    <!--         表头           -->
                    <thead>
                    <tr>
                        <th>器材ID</th>
                        <th>器材名称</th>
                        <th>器材总个数</th>
                        <th>器材借出个数</th>
                        <th>器材类别</th>
                        <th>器材状态</th>
                        <th></th>
                    </tr>
                    </thead>
                    <!--         表头           -->

                    <!--    表单主要内容    -->
                    <!--        "records":[{"id":0,"name":"admin","password":"123456","status":1,"createTime":"2021-11-19T22:26:40","personInfo":null}],
                    "total":1,"size":5,"current":1,"orders":[],"optimizeCountSql":true,"hitCount":false,"countId":null,"maxLimit":null,"searchCount":true,"pages":1-->
                    <tbody id="tbody">
                    <tr th:each="equipment : ${pageInfo.records}">
                        <td th:text="${equipment.id}"></td>
                        <td th:text="${equipment.name}"></td>
                        <td th:text="${equipment.totalNums}"></td>
                        <td th:text="${equipment.rentNums}"></td>
                        <td th:text="${equipment.typeName}"></td>
                        <td>
                            <span th:if="${equipment.status}==0">停止外借</span>
                            <span th:if="${equipment.status}==1">正常</span>
                            <span th:if="${equipment.status}==2">逻辑删除</span>
                        </td>
                        <td>
                            <div class="dropdown" onclick="toQuitRentOrClear(this)">
                                <a href="#" class="btn btn-light btn-floating btn-icon btn-sm"
                                   data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
                                </a>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <button class="dropdown-item updateEQ" type="button" onclick="onUpdate(this)">修改
                                    </button>
                                    <button class="dropdown-item" type="button" onclick="deleteEquipment(this)">删除
                                    </button>
                                    <button class="dropdown-item quitRentCl" type="button"
                                            onclick="quitRentEquipment(this)">禁止外借
                                    </button>
                                    <button class="dropdown-item clearbt" type="button" onclick="clearEquipment(this)">逻辑删除
                                    </button>
                                </div>
                            </div>
                        </td>
                    </tr>

                    </tbody>
                    <!--    表单主要内容    -->

                    <!--      添加新的器材       -->
                    <tfoot>
                    <tr>
                        <th>
                            <button data-toggle="modal" href="#insertEquipmentModal" type="button">
                                (+)
                            </button>
                        </th>
                    </tr>
                    </tfoot>
                    <!--    添加新的器材     -->
                </table>
                <!-- 分页html标签-->
                <div class="card-body">
                    <nav aria-label="Page navigation example"
                         style="margin-left: 150px;">
                        <ul class="pagination">
                            <li class="page-item"><a class="page-link" href="#"
                                                     th:text="'当前页码：'+${pageInfo.current}+'【总'+${pageInfo.total}+'条记录，'+${pageInfo.current}+'/'+${pageInfo.pages}+'页】'">
                            </a></li>
                            <li class="page-item"><a class="page-link"
                                                     href="javascript:jumpPage(1)">首页</a></li>
                            <li class="page-item" th:if="${pageInfo.hasPrevious()}"><a class="page-link"
                                                                                       th:href="'javascript:jumpPage('+(${pageInfo.current}-1)+')'">上一页</a>
                            </li>
                            <li class="page-item"><a class="page-link"
                                                     th:href="'javascript:jumpPage('+${pageInfo.current}+')'"
                                                     th:text="${pageInfo.current}"></a>
                            </li>
                            <li class="page-item" th:if="${pageInfo.hasNext()}"><a class="page-link"
                                                                                   th:href="'javascript:jumpPage('+(${pageInfo.current}+1)+')'">下一页</a>
                            </li>
                            <li class="page-item"><a class="page-link"
                                                     th:href="'javascript:jumpPage('+${pageInfo.pages}+')'">尾页</a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
        <!--    管理员表单    -->
        <!-- 添加器材的请求方式为post    enctype="multipart/form-data"-->
        <div th:replace="../templates/menu/equipment/addEquipment-menu :: menu"></div>
        <!-- 添加管理员的请求方式为post    enctype="multipart/form-data"-->

        <!-- 修改器材信息的请求方式为post    enctype="multipart/form-data"-->
        <div th:replace="../templates/menu/equipment/updateEquipment-menu :: menu"></div>
        <!-- 修改器材信息的请求方式为post    enctype="multipart/form-data"-->


    </div>

</main>
<!--    器材信息表单    -->


<!-- begin::global scripts -->
<script src="assets/vendors/bundle.js"></script>
<!-- end::global scripts -->

<!-- begin::custom scripts -->
<script src="assets/js/custom.js"></script>
<script src="assets/js/app.js"></script>
<!-- end::custom scripts -->

<!--分页查询+模糊查询操作-->
<script>
    //这个是页面跳转的函数
    function jumpPage(page) {
        //要修改访问的页码
        document.getElementById("page").value = page;
        document.getElementById("form_query").submit();
    }
</script>
<!--分页查询+模糊查询操作-->

<!--显示修改模态框的函数 -->
<script>
    //定义一个显示修改模态框的函数  item为当前删除按钮的节点
    function onUpdate(item) {
        //1、获取tr节点
        var trItem = item.parentNode.parentNode.parentNode.parentNode;
        console.log(trItem);
        //2、获取tr节点中的td的数据
        var trChilds = trItem.childNodes;//所有td
        var id = trChilds[1].innerText;
        var name = trChilds[3].innerText;
        var totalNums = trChilds[5].innerText;
        var rentNums = trChilds[7].innerText;
        var typeName = trChilds[9].innerText;
        var statusStr = trChilds[11].firstElementChild.innerText;
        console.log(trChilds);//th:text也是一个子节点
        // console.log(id+name+password);
        //3、给模态框中的输入框赋值，进行显示[通过jq的选择器选中节点对象，然后对value赋值]
        $('#updateEquipment input:eq(0)').attr('value', id);
        $('#updateEquipment input:eq(1)').attr('value', name);
        $('#updateEquipment input:eq(2)').attr('value', totalNums);
        $('#updateEquipment input:eq(3)').attr('value', rentNums);
        $('#updateEquipment input:eq(4)').attr('value', typeName);
        $('#updateEquipment input:eq(5)').attr('value', statusStr);
        //4、显示模态框
        $('#updateEquipmentModal').modal();
    }
</script>
<!--显示修改模态框的函数-->
<!--停止外借模态框的函数 -->
<script>
    function toQuitRentOrClear(item) {
        var trItem = item.parentNode.parentNode;
        //2、获取tr节点中的td的数据
        var trChilds = trItem.childNodes;//所有td
        var id = trChilds[1].innerText;
        var statusStr = trChilds[11].firstElementChild.innerText;
        if (statusStr === "停止外借") {
            $(this).lastElementChild.firstElementChild().hide();
            $(this).lastElementChild('.dropdown-item.quitRentCl').hide();

        } else if (statusStr === "逻辑删除") {
            $('.dropdown-item.updateEQ').hide();
            $('.dropdown-item.quitRentCl').hide();
            $('.dropdown-item.clearbt').hide();
        }else {
            console.log("状态正常");
            $('.dropdown-item.updateEQ').show();
            $('.dropdown-item.quitRentCl').show();
            $('.dropdown-item.clearbt').show();
        }
    }
    function quitRentEquipment(item) {
        //1、获取登录表单所需要提交的数据
        var trItem = item.parentNode.parentNode.parentNode.parentNode;
        //2、获取tr节点中的td的数据
        var trChilds = trItem.childNodes;//所有td
        var id = trChilds[1].innerText;
        $.post('quitRent', {"id": id}, function (result) {//result就是data入参后的数据所得到的结果
            //3、请求成功之后，根据响应的结果来进行操作处理（登录失败/登录成功）
            if (result.isok == true) {//登录成功
                $('.dropdown-item.updateEQ').hide();
                $('.dropdown-item.quitRentCl').hide();
                alert("这个器材已禁止外借");
                location.reload();
            } else {//登录失败
                alert(result.errMessage);
            }

        });

    }
    function clearEquipment(item) {
        //1、获取登录表单所需要提交的数据
        var trItem = item.parentNode.parentNode.parentNode.parentNode;
        //2、获取tr节点中的td的数据
        var trChilds = trItem.childNodes;//所有td
        var id = trChilds[1].innerText;
        $.post('clearEquipment', {"id": id}, function (result) {//result就是data入参后的数据所得到的结果
            //3、请求成功之后，根据响应的结果来进行操作处理（登录失败/登录成功）
            if (result.isok == true) {//登录成功
                $('.dropdown-item.updateEQ').hide();
                $('.dropdown-item.quitRentCl').hide();
                $('.dropdown-item.clearbt').hide();
                alert("已清空");
                location.reload();
            } else {//登录失败
                alert(result.errMessage);
            }

        });

    }
</script>

<!--删除功能-->
<script>
    //定义一个删除的处理函数  第二种方法：page.parentNode.parentNode.remove();
    function deleteEquipment(item) {
        var trItem = item.parentNode.parentNode.parentNode.parentNode;
        var trChilds = trItem.childNodes;//所有td
        var id = trChilds[1].innerText;
        //1、发起ajax请求，提交删除操作
        $.post('deleteEquipment', {"id": id}, function (result) {
            //2、删除成功则删除对应的节点
            if (result.isok == true) {
                alert('删除成功');
                //跳转页面
                location.reload();
            } else {
                alert(result.message);
            }
        });
    }
</script>
<!--删除功能-->
</body>
</html>